<template>
  <div class="edit-password-container">
    <ul class="edit-form">
      <li>
        <p>原始密码</p>
        <van-field
          v-model="oldPassword"
          :type="oldPasswordStatus ? 'text' : 'password'"
          placeholder="请输入原始密码"
          maxlength="16"
          :error-message="oldPassword ? '' : oldPasswordErr"
        >
          <template #button>
            <i
              class="iconfont"
              :class="oldPasswordStatus ? 'iconkejian' : 'iconmimabukejian'"
              @click="changeInputType(1)"
            ></i>
          </template>
        </van-field>
      </li>
      <li>
        <p>输入新密码</p>
        <van-field
          v-model="password"
          :type="passwordStatus ? 'text' : 'password'"
          placeholder="请输入新密码，6-16位数字或英文字符"
          maxlength="16"
          :error-message="passwordErr"
        >
          <template #button>
            <i
              class="iconfont"
              :class="passwordStatus ? 'iconkejian' : 'iconmimabukejian'"
              @click="changeInputType(2)"
            ></i>
          </template>
        </van-field>
      </li>
      <li>
        <p>再次确认新密码</p>
        <van-field
          v-model="rePassword"
          :type="rePasswordStatus ? 'text' : 'password'"
          placeholder="再次输入新的登录密码"
          maxlength="16"
          :error-message="rePasswordErr"
        >
          <template #button>
            <i
              class="iconfont"
              :class="rePasswordStatus ? 'iconkejian' : 'iconmimabukejian'"
              @click="changeInputType(3)"
            ></i>
          </template>
        </van-field>
      </li>
    </ul>

    <van-button
      square
      size="normal"
      type="primary"
      block
      @click="submitFn"
    >确 定</van-button>
  </div>
</template>

<script>
import { Field, Button } from 'vant';
import md5 from 'md5';
import { setPassword } from '@/api/user.js';

export default {
  name: 'EditPhone',
  components: {
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      oldPassword: '',
      password: '',
      rePassword: '',
      oldPasswordErr: '',
      passwordErr: '',
      rePasswordErr: '',
      oldPasswordStatus: false,
      passwordStatus: false,
      rePasswordStatus: false
    };
  },
  methods: {
    // 切换输入框类型
    changeInputType(type) {
      // 1原始密码 2新密码 3重复新密码
      if (type === 1) {
        this.oldPasswordStatus = !this.oldPasswordStatus;
      }
      if (type === 2) {
        this.passwordStatus = !this.passwordStatus;
      }
      if (type === 3) {
        this.rePasswordStatus = !this.rePasswordStatus;
      }
    },
    submitFn() {
      this.oldPasswordErr = '';
      this.passwordErr = '';
      this.rePasswordErr = '';
      let passwordReg = /^[A-Za-z0-9]{6,16}$/;

      if (!this.oldPassword) {
        this.oldPasswordErr = '请输入原始密码';
        return;
      }
      if (!this.password) {
        this.passwordErr = '请输入新密码';
        return;
      }
      if (!passwordReg.test(this.password)) {
        this.passwordErr = '请按要求输入新密码';
        return;
      }
      if (!this.rePassword) {
        this.rePasswordErr = '请再次输入新密码';
        return;
      }
      if (!passwordReg.test(this.rePassword)) {
        this.rePasswordErr = '请按要求输入新密码';
        return;
      }
      setPassword({
        set_type: 'edit',
        password: md5(this.password),
        re_password: md5(this.rePassword),
        old_password: md5(this.oldPassword)
      }).then(res => {
        localStorage.removeItem('rememberPassword');
        localStorage.removeItem('loginUserInfo');
        this.$toast({
          message: '密码已修改，请重新登录',
          duration: 1200,
          onClose: () => {
            this.$router.push({
              name: 'login'
            });
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-password-container {
  width: 100%;
  height: 100%;
  padding: 0.213333rem 0.426667rem 0;
  background-color: #fff;

  .edit-form {
    width: 100%;

    li {
      padding-top: 0.32rem;

      p {
        margin-bottom: 0.16rem;
        color: var(--color-deep-gray);
        font-size: 0.346667rem;
      }

      .van-field {
        padding-left: 0;
        padding-right: 0;

        ::v-deep .van-field__value {
          padding-bottom: 0.213333rem;
          border-bottom: 1px solid var(--border-color);
        }

        .iconfont {
          color: var(--color-deep-gray);
        }
      }
    }
  }

  .van-button {
    margin-top: 0.213333rem;
    font-size: 0.426667rem;
    border-radius: 0.106667rem;
    border-color: var(--color-primary);
    background-color: var(--color-primary);
  }
}
</style>